<template>
  <view class="engine-wrapper">
    <view class="index-cate-product-list">
      <!-- <rf-product-list
        :bottom="bottom"
        :list="categoryProductList"
      ></rf-product-list> -->
      <view class="list-wrapper">
        <view
          class="list-item"
          v-for="(item, index) in categoryProductList"
          @tap="navTo(`/pages/product/product?id=${item.id}`)"
          :key="index"
        >
          <image
            :src="item.images[0].path"
            mode="aspectFill"
            class="item-image"
          ></image>
          <view class="item-title">
            {{ item.title }}
          </view>
          <view class="price"> ￥ {{ item.spec[0].price }} </view>
        </view>
      </view>
      <rf-load-more
        :status="loadingType"
        v-if="categoryProductList.length > 0"
      ></rf-load-more>
      <rf-empty
        :bottom="bottom"
        :info="'暂无该分类商品~'"
        v-if="categoryProductList.length === 0"
      ></rf-empty>
    </view>
    <rfLoading isFullScreen :active="loading"></rfLoading>
  </view>
</template>
<script>
import rfProductList from "@/components/rf-product-list";
import { index_product } from "@/api/product";
export default {
  components: {
    rfProductList,
  },
  data() {
    return {
      showCategoryIndex: 0, // 一级菜单高亮显示序号
      categoryList: [], // 分类列表
      currentIndex: 0,
      smallCurrentIndex: 0,
      specClass: "none", // 规格弹窗
      productDetail: {}, // 商品详情
      search: {},
      cateTop: {}, // 分类通用广告图
      loading: true,
      styleCateType: this.$mSettingConfig.styleCateType,
      errorImage: this.$mAssetsPath.errorImage,
      currentCateId: "",
      categoryProductList: [],
      price: "",
      total_sales: "",
      loadingType: "more",
      page: 1,
      moneySymbol: this.moneySymbol,
      productLoading: true,
      currentSecondCategoryList: [],
      categoryInvertedIndex: 0,
    };
  },
  // 每次页面显示 执行该方法
  onLoad(option) {
    uni.setNavigationBarTitle({
      title: option.name,
    });
    this.currentCateId = option.id;
    this.initData(option.id);
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.getNewProductList("refresh", this.currentCateId);
  },
  // 上拉加载
  onReachBottom() {
    if (this.loadingType === "nomore") return;
    this.page++;
    this.getProductList(this.loadingType, this.currentCateId);
  },
  computed: {
    bottom() {
      let bottom = 0;
      /*  #ifdef H5  */
      bottom = 90;
      /*  #endif */
      return bottom;
    },
  },
  methods: {
    // 跳转至商品列表
    navTo(route, id) {
       this.$mRouter.push({ route });
    },
    // 数据初始化
    async initData(id) {
      this.getProductList(this.loadingType, id);
    },
    // 获取产品列表
    async getProductList(type, id) {
      await this.$http
        .get(`${index_product}/${id}`, { status: "", page: this.page })
        .then(async (r) => {
          this.loadingType = r.data.data.length < 15 ? "nomore" : "more";
          this.categoryProductList = [
            ...this.categoryProductList,
            ...r.data.data,
          ];
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    async getNewProductList(type, id){
      await this.$http
        .get(`${index_product}/${id}`, { status: "", page: this.page })
        .then(async (r) => {
          if (type === "refresh") {
            uni.stopPullDownRefresh();
          }
          this.categoryProductList = r.data.data;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    }
  },
};
</script>
<style lang="scss" scoped>
page {
  background-color: $color-white;
}
.engine-wrapper {
  background-color: $page-color-base;
  height: 100vh;
  border-top: 1upx solid #eeeeee;
  .index-cate-product-list {
    .list-wrapper {
      display: flex;
      align-items: center;
      margin:0 30upx;
      justify-content: space-between;
      flex-wrap: wrap;
      .list-item {
        margin-top: 26upx;
        width: 336upx;
        height: 450upx;
        border-radius: 10upx;
        background-color: $color-white;
        .item-image {
          width: 336upx;
          height: 324upx;
        }
        .item-title {
          padding: 10upx 20upx;
          font-size: 30upx;
          font-family: PingFang SC;
          font-weight: 500;
        }
        .price {
          margin-left: 20upx;
          font-size: 32upx;
          font-family: DINPro;
          font-weight: bold;
          color: #f91c1c;
        }
      }
    }
    .no-data {
      margin: 48upx 0;
      color: $font-color-light;
      display: flex;
      justify-content: center;
      align-items: center;
      .iconfont {
        margin-right: 20upx;
        font-size: $font-lg + 16upx;
      }
    }
  }
}
</style>
